import React, { PropTypes } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './Login.less';


const FormItem = Form.Item;

function Login({ dispatch, form }) {
  const handleSubmit = (e) => {
    e.preventDefault();

    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      // console.log('values:', values);

      dispatch({
        type: 'auth/login',
        payload: values,
      });
    });
  };

  const { getFieldDecorator } = form;

  return (
    <div className={styles.content}>
      <div className={styles.img} />
      <Form onSubmit={handleSubmit} className={styles.loginForm}>
        <FormItem>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(
            <Input addonBefore={<Icon type="user" />} placeholder="用户名" />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('pwd', {
            rules: [{ required: true, message: '请输入密码' }],
          })(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="密码" />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>记住我</Checkbox>,
          )}
          <Link className={styles.loginFormForgot} to="/forgetpsw">忘记密码</Link>
          <Button type="primary" htmlType="submit" className={styles.loginFormButton}>
            登录
          </Button>
          {/* <Link className={styles.loginFormForgot} to="register" >立即注册</Link>*/}
        </FormItem>
      </Form>
    </div>
  );
}


Login.propTypes = {
  dispatch: PropTypes.func,
};

function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(Form.create()(Login));
